<template>
  <a-input-search
    :size="props.size"
    class="customSearch"
    v-model:value="props.value"
    :placeholder="props.placeholder"
    @search="onSearch"
  />
</template>
<script lang="ts" setup>
interface PropsType {
  value: string
  placeholder: string
  size: string
}
const props = withDefaults(defineProps<PropsType>(), {
  value: '',
  placeholder: '请输入',
  size: 'middle'
})

const emit = defineEmits(['onSearch'])
// 父级更多
const onSearch = () => {
  emit('onSearch')
}
</script>
<style lang="scss" scoped>
.customSearch {
  :deep(.ant-input-wrapper) {
    .ant-input {
      background: #143b82;
      border: 1px solid #143b82;
      // height: 56vh * $Bh;
    }
    .ant-btn-icon-only > .anticon {
      color: #fff;
    }

    .ant-input-search .ant-input:hover,
    .ant-input-search .ant-input:focus {
      border-color: #4266b2;
    }

    .ant-input-search
      > .ant-input-group
      > .ant-input-group-addon:last-child
      .ant-input-search-button:not(.ant-btn-primary) {
      color: #fff;
    }

    .ant-input-search
      .ant-input:hover
      + .ant-input-group-addon
      .ant-input-search-button:not(.ant-btn-primary),
    .ant-input-search
      .ant-input:focus
      + .ant-input-group-addon
      .ant-input-search-button:not(.ant-btn-primary) {
      border-left-color: #143b82;
    }

    .ant-input-group-addon {
      background: #143b82;

      .ant-btn {
        background: #143b82;
        border-color: #4266b2;
      }
    }
  }
}
</style>
